import type { NextPage } from "next";
import { Button, CardFooter } from "@nextui-org/react";
import { Layout } from "@/components/layout/layout";
import { useRouter } from "next/router";
import { useGlobalState } from "@/hooks";

import React from "react";
import { Card, CardHeader, CardBody, Image } from "@nextui-org/react";

const HomePage: NextPage = () => {
  const router = useRouter();

  const userInfo = useGlobalState("user", "userInfo");
  const isSU = userInfo?.role === 1;

  const goLogin = () => {
    router.push("/login");
  };

  const goApps = () => {
    router.push("/apps");
  };

  const goUsers = () => {
    router.push("/users");
  };

  return (
    <div className="home-page overflow-hidden">
      <div className="home-main text-center font-[300] mt-[80px] flex flex-col items-center">
        <h1 className="text-[60px]">Config Center</h1>
        <p className="text-[20px] font-[200] mt-8">
          Improve development efficiency and flexibility in function switching
        </p>

        <div className="hidden feature-title mt-[80px] mb-8 text-[30px] font-[300]">
          Features
        </div>
        <div className="flex space-x-8 w-[400px] mt-[80px]">
          <Card className="py-4 flex-1">
            <CardBody className="overflow-visible py-2 m-auto  items-center">
              <Image
                alt="Card background"
                className="object-cover rounded-xl "
                src="/setting.jpg"
                width={60}
              />
            </CardBody>
            <CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
              <h4 className="font-light text-large m-auto">Configure Manage</h4>
              {/* <p className="text-default-500 text-tiny font-light">
                Manage app configuration
              </p> */}
            </CardFooter>
          </Card>
          <Card className="py-4 flex-1">
            <CardBody className="overflow-visible py-2 m-auto items-center">
              <Image
                alt="Card background"
                className="object-cover rounded-xl"
                src="/data.jpg"
                width={60}
              />
            </CardBody>
            <CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
              <h4 className="font-light text-large m-auto">Mock Data Api</h4>
            </CardFooter>
          </Card>
        </div>
        <div className="btn-line mt-[80px]">
          <Button color="primary" size="lg" className="mt-5" onClick={goLogin}>
            Go Login
          </Button>
          <Button
            color="primary"
            size="lg"
            className="mx-5 mt-5"
            onClick={goApps}
          >
            My Apps
          </Button>

          {isSU && (
            <Button
              color="primary"
              size="lg"
              className="mt-5"
              onClick={goUsers}
            >
              View Users
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default HomePage;

export function getStaticProps() {
  return {
    props: {
      isBg: true,
    },
  };
}
